<template>
  <div class="scene-prop">
    <SSection name="场景">
      <SProp label="名字" :data="name" @update:data="onUpdateData"></SProp>
      <SProp label="事件表">
        <SSelect :data="events" :value="curEvent" @change="onChangeUseEvent"></SSelect>
      </SProp>
    </SSection>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import assetsStore from '../store/assets';
import { AssetType, IAssetInfo } from '../store/types';
import SSection from '@/ui-kit/section/section.vue';
import SProp from '@/ui-kit/prop/prop.vue';
import SSelect from '@/ui-kit/select/select.vue';
import { SceneData, scenesStore } from '../store/scenes';

export default defineComponent({
  name: 'scene-prop',
  components: { SSelect, SProp, SSection },
  props: {
    data: {
      type: String,
    },
  },
  setup(props, { emit }) {
    const name = computed(() => {
      const id: string = props.data as string;
      const asset: IAssetInfo | null = assetsStore().getAsset(id);
      return asset?.name || '';
    });
    const curEvent = computed(() => {
      const id: string = props.data as string;
      const asset: IAssetInfo | null = assetsStore().getAsset(id);
      if (asset) {
        const data: SceneData | null = scenesStore().getScene(asset.data);
        if (data) {
          return data.event;
        }
      }
      return null;
    });
    const events = computed(() => {
      const events = assetsStore().filterAssetByType(AssetType.Event);
      return events.map(item => {
        return { label: item.name, value: item.id };
      });
    });

    return {
      name,
      events,
      curEvent,
      onUpdateData(value: string) {
        const id: string = props.data as string;
        assetsStore().renameAsset(id, value);
      },
      onChangeUseEvent(val: string) {
        const asset = assetsStore().getAsset(props.data as string);
        if (asset) {
          scenesStore().changeSceneEvent(asset.data, val);
        }
      },
    };
  },
});

</script>

<style scoped lang="scss">
.scene-prop {

}
</style>